/* Flex 弹性布局 */
@mixin flex($direction: row, $align: center, $justify: center, $wrap: nowrap) {
  display: flex;
  flex-direction: $direction;
  align-items: $align;
  justify-content: $justify;
  flex-wrap: $wrap;
}

/* 箭头 */
@mixin arrow($width: 48, $color: #999, $size: 2, $rotate: 45) {
  width: rpx($width / 1.5);
  height: rpx($width);
  overflow: hidden;
  &::before {
    content: '';
    width: rpx($width * .4);
    height: rpx($width * .4);
    box-sizing: border-box;
    border-top: rpx($size) solid $color;
    border-right: rpx($size) solid $color;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(#{$rotate}deg);
  }
}

/* 关闭图标 */
@mixin close($size: 88px, $color: #999) {
  width: #{$size};
  height: #{$size};
  &::before {
    content: '';
    width: 40%;
    height: 2px;
    background-color: $color;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
  }
  &::after {
    content: '';
    width: 2px;
    height: 40%;
    background-color: $color;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
  }
}

@function rpx($size) {
  @return ($size / 100) + rem;
}

@mixin clamp($clamp: 2) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $clamp;
  overflow: hidden;
  text-overflow: ellipsis;
}